<template>
  <div class="salon_diagnose_11">
    <div class="diagnose_11_ctx">
      <div v-for="(item, idx) in CharterList" class="diagnose_11_c">
        <div class="diagnose_11_c_title">
          <div class="diagnose_11_c_icon"></div>
          <div class="diagnose_11_c_title_name">{{ item['项目'] }}</div>
        </div>
        <div class="diagnose_11_c_item">
          <div class="diagnose_11_c_item_name">评价标准</div>
          <ul class="diagnose_11_c_ul">
            <li v-for="m in item['评价标准']">{{ m }}</li>
          </ul>
        </div>
        <div class="diagnose_11_c_item">
          <div class="diagnose_11_c_item_name">督查方法</div>
          <ul class="diagnose_11_c_ul">
            <li v-for="m in item['督查方法']">{{ m }}</li>
          </ul>
        </div>
        <div class="diagnose_11_c_item">
          <div class="diagnose_11_c_item_name">评分细则</div>
          <div class="diagnose_11_table">
            <table border="0" cellpadding="3">
              <colgroup>
                <col span="1" style="border: 2px solid #d2dcf4" />
                <col span="4" style="background-color: none" />
              </colgroup>
              <tr>
                <th style="width: 520px; text-align: center">评分细则</th>
                <th style="width: 90px; text-align: center">标准分</th>
                <th style="width: 110px; text-align: center">自检得分</th>
                <th style="width: 200px; text-align: center">扣分原因</th>
                <th style="width: 200px; text-align: center">迎检准备</th>
              </tr>
              <tr v-for="(m, idx2) in item['评分']">
                <td style="text-align: left">
                  {{ m['评分细则'] }}
                </td>
                <td>{{ m['标准分'] }}</td>
                <td>
                  <el-input-number
                    v-model="form[`c${idx + 1}${idx2 + 1}`].score"
                    :step="1"
                    :min="0"
                    :max="m['标准分']"
                    controls-position="right"
                    size="small"
                    style="width: 100px"></el-input-number>
                </td>
                <td>
                  <el-input
                    v-model="form[`c${idx + 1}${idx2 + 1}`].resean"
                    type="textarea"
                    maxlength="64"
                    show-word-limit
                    style="width: 180px"></el-input>
                </td>
                <td>
                  <el-input
                    v-model="form[`c${idx + 1}${idx2 + 1}`].check"
                    type="textarea"
                    maxlength="128"
                    show-word-limit
                    style="width: 180px"></el-input>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-button v-if="isUpdating" type="primary" size="medium" disabled icon="el-icon-loading" style="width: 120px">
        提交中
      </el-button>
      <el-button v-else-if="form.id === undefined" type="primary" size="medium" @click="handleSubmitForm(true)">保存</el-button>
      <el-button v-else type="warning" size="medium" @click="handleSubmitForm(false)">修改</el-button>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { geCheckDiagnoseByNo, saveCheckDiagnoseByNo } from '@/api/diagnose';
// 引入自定义组件
import CharterList from './diagnose11';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyCheckData = {
  id: undefined,
  // c11 ~ c14
  c11: { score: 0, resean: '', check: '' },
  c12: { score: 0, resean: '', check: '' },
  c13: { score: 0, resean: '', check: '' },
  c14: { score: 0, resean: '', check: '' },
  // c21 ~ c26
  c21: { score: 0, resean: '', check: '' },
  c22: { score: 0, resean: '', check: '' },
  c23: { score: 0, resean: '', check: '' },
  c24: { score: 0, resean: '', check: '' },
  c25: { score: 0, resean: '', check: '' },
  c26: { score: 0, resean: '', check: '' },
  // c31 ~ c36
  c31: { score: 0, resean: '', check: '' },
  c32: { score: 0, resean: '', check: '' },
  c33: { score: 0, resean: '', check: '' },
  c34: { score: 0, resean: '', check: '' },
  c35: { score: 0, resean: '', check: '' },
  c36: { score: 0, resean: '', check: '' },
  // c41 ~ c43
  c41: { score: 0, resean: '', check: '' },
  c42: { score: 0, resean: '', check: '' },
  c43: { score: 0, resean: '', check: '' },
  // c51 ~ c56
  c51: { score: 0, resean: '', check: '' },
  c52: { score: 0, resean: '', check: '' },
  c53: { score: 0, resean: '', check: '' },
  c54: { score: 0, resean: '', check: '' },
  c55: { score: 0, resean: '', check: '' },
  c56: { score: 0, resean: '', check: '' },
  // c61 ~ c63
  c61: { score: 0, resean: '', check: '' },
  c62: { score: 0, resean: '', check: '' },
  c63: { score: 0, resean: '', check: '' },
  // c71 ~ c74
  c71: { score: 0, resean: '', check: '' },
  c72: { score: 0, resean: '', check: '' },
  c73: { score: 0, resean: '', check: '' },
  c74: { score: 0, resean: '', check: '' },
  coachId: null,
  coachName: null,
};

const AttrC = [
  'c11',
  'c12',
  'c13',
  'c14',
  'c21',
  'c22',
  'c23',
  'c24',
  'c25',
  'c26',
  'c31',
  'c32',
  'c33',
  'c34',
  'c35',
  'c36',
  'c41',
  'c42',
  'c43',
  'c51',
  'c52',
  'c53',
  'c54',
  'c55',
  'c56',
  'c61',
  'c62',
  'c63',
  'c71',
  'c72',
  'c73',
  'c74',
];

export default {
  name: 'Diagnose11',
  data() {
    return {
      CharterList: CharterList,
      salon: {},
      form: EmptyCheckData,
      rules: {},
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {},
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose11();
    },
    loadDiagnose11: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyCheckData);
      const errAlertMsg = '查询合规性复盘信息失败';
      await geCheckDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form.id = ret.id;
            AttrC.forEach(x => {
              if (ret[x]) {
                this.form[x].score = ret[x].score;
                this.form[x].resean = ret[x].resean;
                this.form[x].check = ret[x].check;
              }
            });
          } else {
            // 还未评分, 默认设置满分
            this.CharterList.forEach((x, idx) => {
              x['评分'].forEach((y, idx2) => {
                const score = y['标准分'];
                const field = `c${idx + 1}${idx2 + 1}`;
                this.form[field].score = score;
              });
            });
          }
        })
        .catch(err => {
          console.log('geCheckDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    handleSubmitForm: async function (isadd) {
      const row = this.form;
      // Validate row data against rules
      for (const key in this.rules) {
        if (this.rules.hasOwnProperty(key)) {
          const rule = this.rules[key][0];
          if (rule.required && (row[key] === undefined || row[key] === null)) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'array' && row[key].length < rule.min) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'number' && typeof row[key] !== 'number') {
            MessageBox.alert(rule.message);
            return;
          }
        }
      }

      if (row.id <= 0) {
        row.id = null;
      }

      this.isUpdating = true;
      const errAlertMsg = '保存合规性复盘信息失败';
      saveCheckDiagnoseByNo(this.salon.diagnoseNo, row)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.loadDiagnose11();
          MessageBox.alert('保存成功');
        })
        .catch(err => {
          console.log('saveCheckDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_11 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  .diagnose_11_ctx {
    width: 100%;
    display: block;

    .diagnose_11_c {
      width: 100%;
      padding: 0 0 10px 0;
      display: block;

      .diagnose_11_c_title {
        @extend .salon_model_title_2;
        padding: 0 0 10px 16px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .diagnose_11_c_icon {
          width: 2px;
          height: 18px;
          border: 2px solid #724eff;
          margin-right: 11px;
        }

        .diagnose_11_c_title_name {
          margin: 0 20px 0 0;
          font-weight: 700;
          color: #606266;
        }
      }

      .diagnose_11_c_item {
        padding: 0 0 10px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .diagnose_11_c_item_name {
          @extend .salon_model_title_2;
          margin: 0 20px 10px 0;
        }

        .diagnose_11_c_ul {
          width: 70%;
          list-style-type: none;
          padding: 0;
          margin: 0;
        }

        .diagnose_11_c_ul li {
          margin-bottom: 5px;
        }

        .diagnose_11_table {
          width: 100%;
          display: block;
        }

        .diagnose_11_table table {
          border-collapse: collapse;
        }

        .diagnose_11_table th {
          @extend .salon_model_lable_th;
          text-align: center;
          vertical-align: middle;
        }
        .diagnose_11_table td {
          text-align: center;
          vertical-align: middle;
          border-bottom: 1px solid #ebeef5;
        }

        .diagnose_11_table td .in_td_title {
          margin: 0 5px 0 0;
        }
      }
    }
  }
}
</style>
